<template>
	<view class="contain">
		<!--pages/student/approve.wxml-->
		<view class="class_class">
			<view v-for="(item, index) in classType" :key="index">
				<view style="margin-left: 20rpx;" :class="{'class_active': item.type == currentType}" @click="changeType(item.type)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="content">
			<view class="class_info" v-for="(item, index) in classList" :key="index">
				<view class="class_detail">
					<view style="display: flex; flex-direction: row;">
						<view style="width: 100rpx;">{{item.name}}</view>
						<view style="margin-left: 400rpx; color: #FD973F;" @click="jumpToView(item)">{{item.type}}</view>
					</view>
				</view>
			</view>
		</view>

		<button class="bottom" @click="jumpBack()">
			已审批
		</button>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';
	
	const db = cloudbase.database();
	const dbCmd = db.command;
	export default {
		data() {
			return {
				classType: [
					// {
					// 	name: '请假审批',
					// 	type: 0
					// },
					{
						name: '人员审批',
						type: 1
					}
				],
				classList: '',
				currentType: 1
			};
		},
		onLoad() {
			// this.showLeave();
			this.showStaff();
		},
		methods: {
			jumpToView: function(item){
				if(this.currentType == 0){
					// 请假审批
					uni.navigateTo({
						url: '../leaveRecord/leaveRecord?info=' + JSON.stringify(item)
					})
				}else{
					uni.navigateTo({
						url: '../studentInfo/studentInfo?info=' + JSON.stringify(item)
					})
				}
			},
			jumpBack: function(){
				uni.navigateBack({
					delta:1
				})
			},
			changeType: function(type){
				this.currentType = type;
				switch(type){
					case 0:
						// 显示请假审批
						this.showLeave();
						break;
					case 1:
						// 显示人员审批
						this.showStaff();
						break;
				}
			},
			showLeave: function() {
				
			},
			showStaff: function() {
				db.collection('audit').where({
					institutionId: getApp().globalData.userInfo.institutionId,
					finish: false
				}).get().then(res => {
					console.log(res.data);
					let result = res.data;
					result.forEach(item => {
						switch(item.type) {
							case 'join': 
								item.type = '申请加入';
								break;
						}
					})
					this.classList = result;
				})
			}
		},
	};
</script>
<style>
	/* pages/student/approve.wxss */
	page {
		background-color: #F3F5F7;
	}
	.contain{
		margin: 10rpx 30rpx;
	}
	.class_class{
		display: flex;
		justify-content: space-evenly;
		margin: 0rpx 25rpx ;
		margin-bottom: 20rpx;
	}
	.class_active{
		font-weight: bold;
		border-bottom: solid 6rpx #FD973F;
		/* margin-left: 24rpx; */
		/* margin-right: 24rpx; */
	}
	.class_info{
		background-color: #fff;
		width: 660rpx;
		height: 60rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-bottom: auto;
		border-radius: 0rpx;
		display: flex;
		border-bottom: 2rpx #999999;
	}
	.class_detail{
		width: 660rpx;
		display: flex;
		border-bottom: 2rpx #999999;
	}
	.member {
		width: 200rpx;
		height: fit-content;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-bottom: 1rpx solid #777;
	}
	.content {
		width: 690rpx;
		height: fit-content;
		display: flex;
		margin-bottom: 70rpx;
		border-radius: 16rpx;
		flex-direction: column;
		background-color: #FFFFFF;
	}
	.bottom {
		height: 50px;
		width: 160px;
		background-color: #FF9933;
		color: #fff;
		border-radius: 5vw;
	}
</style>
